<template>
    <div class="cygames">
        <video ref="cygames" src="../assets/videos/cygames.mp4" muted autoplay></video>
    </div>
    
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    @Component
    export default class Cygames extends Vue {
        mounted () {
            const video = (this.$refs.cygames as HTMLMediaElement);
            video.onended = () => {
                setTimeout(() => {
                    video.classList.add('fade');
                    video.addEventListener('transitionend', () =>{
                        this.$emit('end');
                    })
                },1000);
            }
        }
    }
</script>

<style lang="scss">
    div.cygames {
        position: absolute;
        width: 100%;
        height: 100%;
        video {
            width: 100%;
            height: 100%;
            object-fit: fill;
            will-change: filter;
            transition: filter 1s ease;
            &.fade {
                filter: brightness(0);
            }
        }
    }
</style>